import React, { FC, useEffect, useState } from "react";
import { Spin, Button, Result } from "antd";
import useGetQuestionData from "../../hooks/useGetQuestionData";
import useGetPageInfo_redux from "../../hooks/useGetPageInfo_redux";
import { useNavigate } from "react-router-dom";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import StateHead from "./StateHead";
//引入左侧组件列表
import ComponentList from "./ComponentList";
//引入中间统计列表
import StatTable from "./StatTable";
//引入图表组件
import ChartStat from "./ChartStat";
const CBN = classNames.bind(style);

const QuestionStat: FC = () => {
  //设置selectid 和 selectedtype
  const [selectedId, setselectedId] = useState("");
  const [selectedType, setselectedType] = useState("");
  const [selectedProps, setselectedProps] = useState("");
  const { loading } = useGetQuestionData();

  //获取是否发布
  const { isPublish } = useGetPageInfo_redux();
  const nav = useNavigate();
  if (loading)
    return (
      <div style={{ textAlign: "center", padding: "20px 0" }}>
        <Spin></Spin>
      </div>
    );
  if (!isPublish) {
    return (
      <Result
        status="warning"
        title="该页面还没发布."
        extra={
          <Button
            type="primary"
            key="console"
            onClick={() => {
              nav(-1);
            }}
          >
            返回上一级
          </Button>
        }
      />
    );
  }
  return (
    <div className={CBN("QuestionStat")}>
      <StateHead></StateHead>
      <div className={CBN("Container")}>
        <div className={CBN("left")} style={{ width: "320" }}>
          <ComponentList
            selectedProps={selectedProps}
            selectedId={selectedId}
            setselectedId={setselectedId}
            selectedType={selectedType}
            setselectedType={setselectedType}
          ></ComponentList>
        </div>
        <div className={CBN("middle")}>
          <StatTable
            setselectedProps={setselectedProps}
            selectedId={selectedId}
            setselectedId={setselectedId}
            selectedType={selectedType}
            setselectedType={setselectedType}
          ></StatTable>
        </div>
        <div className={CBN("right")} style={{ width: "420" }}>
          <ChartStat selectedId={selectedId} selectedType={selectedType} />
        </div>
      </div>
    </div>
  );
};
export default QuestionStat;
